
<!DOCTYPE html>
<html lang="en" class="h-100">

<head>
    <title>Hands-On Selenium WebDriver with Java</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Boni Garcia">

    <link rel="icon" type="image/png" href="img/hands-on-icon.png">

    <link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body class="d-flex flex-column h-100">
<main class="flex-shrink-2">
    <div class="container">
        <div class="row py-2">
            <div class="col col-10">
                <h1 class="display-4">Hands-On Selenium WebDriver with Java</h1>
                <h5>Practice site</h5>
            </div>
            <div class="col col-2">
                <a href="https://github.com/bonigarcia/selenium-webdriver-java"><img class="img-fluid" src="img/hands-on-icon.png"></a>
            </div>
        </div>
        <div class="row">
            <div class="col col-12">
                <hr class="my-4">
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <h1 class="display-6">Login form</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-4 py-2">
                <form method="get" action="login-sucess.html">
                    <label class="form-label w-100">Login
                        <input type="text" class="form-control" name="username" id="username">
                    </label>
                    <label class="form-label w-100">Password
                        <input type="password" class="form-control" name="password" id="password" autocomplete="off">
                    </label>
                    <button type="submit" class="btn btn-outline-primary mt-2">Submit</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-4 py-2">
                <div class="d-none alert alert-danger" role="alert" id="invalid">
                    Invalid credentials
                </div>
            </div>
        </div>
    </div>
</main>
<footer class="footer mt-auto py-3 bg-light">
    <div class="container">
        <span class="text-muted">Copyright &copy; 2021-2023 <a href="https://bonigarcia.dev/">Boni Garc&iacute;a</a></span>
    </div>
</footer>

<script>
    window.onsubmit = function (event) {
      let username = document.getElementById("username").value;
      let password = document.getElementById("password").value;
      if (username != "user" || password != "user") {
        document.getElementById("invalid").classList.remove("d-none");
        return false;
      }
    }
  </script>
</body>

</html>